﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
    <div>The buttons can be grouped by putting them in a ButtonGroup component.</div>
    <br />
    <BitButtonGroup TItem="BitButtonGroupOption">
        <BitButtonGroupOption Text="Add" />
        <BitButtonGroupOption Text="Edit" />
        <BitButtonGroupOption Text="Delete" />
    </BitButtonGroup>
</DemoExample>

<DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">
    <div>The ButtonGroup has three variants: Fill (default), Outline, and Text.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" IsEnabled="false" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Variant="BitVariant.Fill" IsEnabled="false" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" IsEnabled="false" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" IsEnabled="false" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Variant="BitVariant.Outline" IsEnabled="false" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" IsEnabled="false" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" IsEnabled="false" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Variant="BitVariant.Text" IsEnabled="false" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" IsEnabled="false" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>

<DemoExample Title="Icon" RazorCode="@example3RazorCode" Id="example3">
    <div>Each item in the ButtonGroup can have an icon.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>

<DemoExample Title="IconOnly" RazorCode="@example4RazorCode" Id="example4">
    <div>The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" TItem="BitButtonGroupOption" IconOnly>
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" TItem="BitButtonGroupOption" IconOnly>
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" TItem="BitButtonGroupOption" IconOnly>
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div>Alternatively, each button can be set to IconOnly by simply leaving the text field empty.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" />
            <BitButtonGroupOption IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>

<DemoExample Title="ReversedIcon" RazorCode="@example5RazorCode" Id="example5">
    <div>Reverses the positions of the icon and the main content of the button.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" ReversedIcon />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" ReversedIcon />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" ReversedIcon />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" ReversedIcon />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" ReversedIcon />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" ReversedIcon />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" IconName="@BitIconName.Add" ReversedIcon />
            <BitButtonGroupOption Text="Edit" IconName="@BitIconName.Edit" ReversedIcon />
            <BitButtonGroupOption Text="Delete" IconName="@BitIconName.Delete" ReversedIcon />
        </BitButtonGroup>
    </div>
</DemoExample>

<DemoExample Title="Toggle" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>The Toggle in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Toggle Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption OnText="Back (2X)" OffText="Back (1X)" OnIconName="@BitIconName.RewindTwoX" OffIconName="@BitIconName.Rewind" />
            <BitButtonGroupOption OnTitle="Resume" OffTitle="Play" OnIconName="@BitIconName.PlayResume" OffIconName="@BitIconName.Play" />
            <BitButtonGroupOption OnText="Forward (2X)" OffText="Forward (1X)" OnIconName="@BitIconName.FastForwardTwoX" OffIconName="@BitIconName.FastForward" ReversedIcon />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Toggle Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption OnText="Back (2X)" OffText="Back (1X)" OnIconName="@BitIconName.RewindTwoX" OffIconName="@BitIconName.Rewind" />
            <BitButtonGroupOption OnTitle="Resume" OffTitle="Play" OnIconName="@BitIconName.PlayResume" OffIconName="@BitIconName.Play" />
            <BitButtonGroupOption OnText="Forward (2X)" OffText="Forward (1X)" OnIconName="@BitIconName.FastForwardTwoX" OffIconName="@BitIconName.FastForward" ReversedIcon />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Toggle Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption OnText="Back (2X)" OffText="Back (1X)" OnIconName="@BitIconName.RewindTwoX" OffIconName="@BitIconName.Rewind" />
            <BitButtonGroupOption OnTitle="Resume" OffTitle="Play" OnIconName="@BitIconName.PlayResume" OffIconName="@BitIconName.Play" />
            <BitButtonGroupOption OnText="Forward (2X)" OffText="Forward (1X)" OnIconName="@BitIconName.FastForwardTwoX" OffIconName="@BitIconName.FastForward" ReversedIcon />
        </BitButtonGroup>
    </div>
    <br /><br /><br /><br />
    <div>Binding:</div><br />
    <BitButtonGroup Toggle Variant="BitVariant.Outline" TItem="BitButtonGroupOption" @bind-ToggleKey="toggleKey">
        <BitButtonGroupOption Key="back" OnText="Back (2X)" OffText="Back (1X)" OnIconName="@BitIconName.RewindTwoX" OffIconName="@BitIconName.Rewind" />
        <BitButtonGroupOption Key="play" OnTitle="Resume" OffTitle="Play" OnIconName="@BitIconName.PlayResume" OffIconName="@BitIconName.Play" />
        <BitButtonGroupOption Key="forward" OnText="Forward (2X)" OffText="Forward (1X)" OnIconName="@BitIconName.FastForwardTwoX" OffIconName="@BitIconName.FastForward" ReversedIcon />
    </BitButtonGroup>
    <div>Toggle key: @toggleKey</div>
    <BitButton OnClick="@(() => toggleKey = "forward")">Forward</BitButton>
    <br /><br /><br /><br />
    <div>OnToggleChange:</div><br />
    <BitButtonGroup Toggle Variant="BitVariant.Outline" TItem="BitButtonGroupOption" DefaultToggleKey="forward" OnToggleChange="(BitButtonGroupOption o) => onChangeToggleOption = o">
        <BitButtonGroupOption Key="back" OnText="Back (2X)" OffText="Back (1X)" OnIconName="@BitIconName.RewindTwoX" OffIconName="@BitIconName.Rewind" />
        <BitButtonGroupOption Key="play" OnTitle="Resume" OffTitle="Play" OnIconName="@BitIconName.PlayResume" OffIconName="@BitIconName.Play" />
        <BitButtonGroupOption Key="forward" OnText="Forward (2X)" OffText="Forward (1X)" OnIconName="@BitIconName.FastForwardTwoX" OffIconName="@BitIconName.FastForward" ReversedIcon />
    </BitButtonGroup>
    <div>Changed toggle: @onChangeToggleOption?.Key , @onChangeToggleOption?.IsToggled</div>
</DemoExample>

<DemoExample Title="Vertical" RazorCode="@example7RazorCode" Id="example7">
    <div>By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the <strong>Vertical</strong> property.</div>
    <br /><br />
    <div class="buttons-container">
        <div class="example-content">
            <div>Fill (default)</div>
            <BitButtonGroup Variant="BitVariant.Fill" Vertical TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
        </div>
        <br /><br />
        <div class="example-content">
            <div>Outline</div>
            <BitButtonGroup Variant="BitVariant.Outline" Vertical TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
        </div>
        <br /><br />
        <div class="example-content">
            <div>Text</div>
            <BitButtonGroup Variant="BitVariant.Text" Vertical TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
        </div>
    </div>
</DemoExample>

<DemoExample Title="Events" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <div>Managing button click events.</div>
    <br /><br />
    <div class="example-content">
        <div>Component's ItemClick event:</div>
        <BitButtonGroup OnItemClick="item => clickedOption = item.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" />
            <BitButtonGroupOption Text="Edit" />
            <BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <div>Clicked item: <b>@clickedOption</b></div>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Item's Click event:</div>
        <BitButtonGroup TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Increase" IconName="@BitIconName.Add" OnClick="_ => { clickCounter++; StateHasChanged(); }" />
            <BitButtonGroupOption Text="Reset" IconName="@BitIconName.Reset" OnClick="_ => { clickCounter=0; StateHasChanged(); }" />
            <BitButtonGroupOption Text="Decrease" IconName="@BitIconName.Remove" OnClick="_ => { clickCounter--; StateHasChanged(); }" />
        </BitButtonGroup>
        <div>Click count: <b>@clickCounter</b></div>
    </div>
</DemoExample>

<DemoExample Title="Size" RazorCode="@example9RazorCode" Id="example9">
    <div>Different sizes for buttons to meet design needs, ensuring flexibility within your application.</div>
    <br /><br />
    <div class="example-content">
        <div>Small</div>
        <BitButtonGroup Size="BitSize.Small" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Size="BitSize.Small" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Size="BitSize.Small" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Medium</div>
        <BitButtonGroup Size="BitSize.Medium" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Size="BitSize.Medium" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Size="BitSize.Medium" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Large</div>
        <BitButtonGroup Size="BitSize.Large" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Size="BitSize.Large" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Size="BitSize.Large" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>

<DemoExample Title="FullWidth" RazorCode="@example10RazorCode" Id="example10">
    <div>Setting the FullWidth makes the button group occupy 100% of its container's width.</div>
    <br /><br />
    <div class="example-content">
        <BitButtonGroup FullWidth Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup FullWidth Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup FullWidth Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>


<DemoExample Title="Color" RazorCode="@example11RazorCode" Id="example11">
    <div>Offering a range of specialized colors, providing visual cues for specific states within your application.</div>
    <br /><br />
    <div class="example-content">
        <div>Primary</div>
        <BitButtonGroup Color="BitColor.Primary" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Primary" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Primary" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Secondary</div>
        <BitButtonGroup Color="BitColor.Secondary" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Secondary" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Secondary" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Tertiary</div>
        <BitButtonGroup Color="BitColor.Tertiary" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Tertiary" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Tertiary" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Info</div>
        <BitButtonGroup Color="BitColor.Info" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Info" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Info" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Success</div>
        <BitButtonGroup Color="BitColor.Success" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Success" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Success" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Warning</div>
        <BitButtonGroup Color="BitColor.Warning" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Warning" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Warning" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>SevereWarning</div>
        <BitButtonGroup Color="BitColor.SevereWarning" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.SevereWarning" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.SevereWarning" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Error</div>
        <BitButtonGroup Color="BitColor.Error" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Error" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.Error" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
        <div class="example-content">
            <div style="color:var(--bit-clr-bg-pri)">PrimaryBackground</div>
            <BitButtonGroup Color="BitColor.PrimaryBackground" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
            <BitButtonGroup Color="BitColor.PrimaryBackground" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
            <BitButtonGroup Color="BitColor.PrimaryBackground" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
        </div>
        <br /><br />
        <div class="example-content">
            <div style="color:var(--bit-clr-bg-pri)">SecondaryBackground</div>
            <BitButtonGroup Color="BitColor.SecondaryBackground" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
            <BitButtonGroup Color="BitColor.SecondaryBackground" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
            <BitButtonGroup Color="BitColor.SecondaryBackground" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
        </div>
        <br /><br />
        <div class="example-content">
            <div style="color:var(--bit-clr-bg-pri)">TertiaryBackground</div>
            <BitButtonGroup Color="BitColor.TertiaryBackground" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
            <BitButtonGroup Color="BitColor.TertiaryBackground" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
            <BitButtonGroup Color="BitColor.TertiaryBackground" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
                <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
            </BitButtonGroup>
        </div>
    </div>
    <br /><br />
    <div class="example-content">
        <div>PrimaryForeground</div>
        <BitButtonGroup Color="BitColor.PrimaryForeground" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.PrimaryForeground" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.PrimaryForeground" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>SecondaryForeground</div>
        <BitButtonGroup Color="BitColor.SecondaryForeground" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.SecondaryForeground" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.SecondaryForeground" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>TertiaryForeground</div>
        <BitButtonGroup Color="BitColor.TertiaryForeground" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.TertiaryForeground" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.TertiaryForeground" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>PrimaryBorder</div>
        <BitButtonGroup Color="BitColor.PrimaryBorder" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.PrimaryBorder" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.PrimaryBorder" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>SecondaryBorder</div>
        <BitButtonGroup Color="BitColor.SecondaryBorder" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.SecondaryBorder" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.SecondaryBorder" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>TertiaryBorder</div>
        <BitButtonGroup Color="BitColor.TertiaryBorder" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.TertiaryBorder" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
        <BitButtonGroup Color="BitColor.TertiaryBorder" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example12RazorCode" Id="example12">
    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
    <br /><br />
    <div class="example-content">
        <div>Component's style & class:</div>
        <BitButtonGroup Style="border-radius: 1rem; margin: 1rem; box-shadow: tomato 0 0 1rem;" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>

        <BitButtonGroup Class="custom-class" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Item's style & class:</div>
        <BitButtonGroup Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="Styled" IconName="@BitIconName.Brush" Style="color: tomato; border-color: brown; background-color: peachpuff;" />
            <BitButtonGroupOption Text="Classed" IconName="@BitIconName.FormatPainter" Class="custom-item" />
        </BitButtonGroup>
    </div>
    <br /><br />
    <div class="example-content">
        <div><b>Styles</b> & <b>Classes</b>:</div>
        <BitButtonGroup Variant="BitVariant.Text"
                        TItem="BitButtonGroupOption"
                        Styles="@(new() { Button = "color: darkcyan; border-color: deepskyblue; background-color: azure;" })">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>

        <BitButtonGroup Variant="BitVariant.Text"
                        TItem="BitButtonGroupOption"
                        Classes="@(new() { Button = "custom-btn" })">
            <BitButtonGroupOption Text="Add" /><BitButtonGroupOption Text="Edit" /><BitButtonGroupOption Text="Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">
    <div>Use BitButtonGroup in right-to-left (RTL).</div>
    <br />
    <div dir="rtl">
        <BitButtonGroup Dir="BitDir.Rtl" Variant="BitVariant.Fill" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="اضافه کردن" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="ویرایش" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="حذف" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
        <br /><br />
        <BitButtonGroup Dir="BitDir.Rtl" Variant="BitVariant.Outline" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="اضافه کردن" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="ویرایش" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="حذف" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
        <br /><br />
        <BitButtonGroup Dir="BitDir.Rtl" Variant="BitVariant.Text" TItem="BitButtonGroupOption">
            <BitButtonGroupOption Text="اضافه کردن" IconName="@BitIconName.Add" />
            <BitButtonGroupOption Text="ویرایش" IconName="@BitIconName.Edit" />
            <BitButtonGroupOption Text="حذف" IconName="@BitIconName.Delete" />
        </BitButtonGroup>
    </div>
</DemoExample>
